<template>
    <div class="home-container">
        <el-row :gutter="24" class="home-card-three">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="home-media">
                <div class="home-card-item">
                    <div style="height: 100%" ref="homeBarRef"></div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts">
import { toRefs, reactive, defineComponent, onMounted, ref, watch, nextTick, onActivated } from 'vue';
import * as echarts from 'echarts';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import { getOutStorage } from '/@/api/out';

let global: any = {
    homeChartOne: null,
    homeChartTwo: null,
    homeCharThree: null,
    dispose: [null, '', undefined],
};

export default defineComponent({
    name: 'home',
    setup() {
        const homeLineRef = ref();
        const homePieRef = ref();
        const homeBarRef = ref();
        const storesTagsViewRoutes = useTagsViewRoutes();
        const storesThemeConfig = useThemeConfig();
        const { themeConfig } = storeToRefs(storesThemeConfig);
        const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
        const state = reactive({
            myCharts: [],
            charts: {
                theme: '',
                bgColor: '',
                color: '#303133',
            },
        });

        var Data: any[]

        const queryForm = reactive({
            pagenum: 1,
            pagesize: 1000,
            query: '',
        });

        const initGetStorage = async () => {
            //获取入库信息
            const res = await getOutStorage(queryForm)
            Data = res.data.value
        };

        initGetStorage()


        // 柱状图
        const initBarChart = () => {
            if (!global.dispose.some((b: any) => b === global.homeCharThree)) global.homeCharThree.dispose();
            global.homeCharThree = <any>echarts.init(homeBarRef.value, state.charts.theme);
            const option = {
                backgroundColor: state.charts.bgColor,
                title: {
                    text: '订单——堆存费',
                    x: 'left',
                    textStyle: { fontSize: '15', color: state.charts.color },
                },
                tooltip: { trigger: 'axis' },
                legend: { data: ['堆存费', '出库数量'], right: 0 },
                grid: { top: 70, right: 80, bottom: 30, left: 80 },
                dataset: {
                    // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
                    // 如果不指定 dimensions，也可以通过指定 series.encode 
                    dimensions: ['oid', 'fee','tons'],
                    source: Data,
                },
                xAxis: [
                    {
                        type: 'category',
                        name:'订单号',
                        boundaryGap: true,
                    },
                ],
                yAxis: [
                    {
                        name: '堆存费',
                        nameLocation: 'middle',
                        nameTextStyle: { padding: [3, 4, 50, 6] },
                    },
                    {
						name: '出库吨数',
						nameLocation: 'middle',
						nameTextStyle: { padding: [50, 4, 5, 6] },
		
					},
                ],
                series: [
                    {
                        type: 'bar',
                        name: '堆存费',
                        barWidth: 30,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(108,80,243,0.3)' },
                                { offset: 1, color: 'rgba(108,80,243,0)' },
                            ]),
                            //柱状图圆角
                            borderRadius: [30, 30, 0, 0],
                        },
                    },
                    {
                        type:'bar',
                        name: '出库数量',
                    }
                ],
            };
            (<any>global.homeCharThree).setOption(option);
            (<any>state.myCharts).push(global.homeCharThree);
        };
        // 批量设置 echarts resize
        const initEchartsResizeFun = () => {
            nextTick(() => {
                for (let i = 0; i < state.myCharts.length; i++) {
                    setTimeout(() => {
                        (<any>state.myCharts[i]).resize();
                    }, i * 1000);
                }
            });
        };
        // 批量设置 echarts resize
        const initEchartsResize = () => {
            window.addEventListener('resize', initEchartsResizeFun);
        };
        // 页面加载时
        onMounted(() => {
            initEchartsResize();
        });
        // 由于页面缓存原因，keep-alive
        onActivated(() => {
            initEchartsResizeFun();
        });
        // 监听 vuex 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
        watch(
            () => isTagsViewCurrenFull.value,
            () => {
                initEchartsResizeFun();
            }
        );
        // 监听 vuex 中是否开启深色主题
        watch(
            () => themeConfig.value.isIsDark,
            (isIsDark) => {
                nextTick(() => {
                    state.charts.theme = isIsDark ? 'dark' : '';
                    state.charts.bgColor = isIsDark ? 'transparent' : '';
                    state.charts.color = isIsDark ? '#dadada' : '#303133';
                    setTimeout(() => {
                        initBarChart();
                    }, 1000);
                });
            },
            {
                deep: true,
                immediate: true,
            }
        );
        return {
            homeLineRef,
            homePieRef,
            homeBarRef,
            initGetStorage,
            ...toRefs(state),
        };
    },
});
</script>

<style scoped lang="scss">
$homeNavLengh: 8;

.home-container {
    overflow: hidden;

    .home-card-three {
        .home-card-item {
            width: 100%;
            height: 130px;
            border-radius: 4px;
            transition: all ease 0.3s;
            padding: 20px;
            overflow: hidden;
            background: var(--el-color-white);
            color: var(--el-text-color-primary);
            border: 1px solid var(--next-border-color-light);

            &:hover {
                box-shadow: 0 2px 12px var(--next-color-dark-hover);
                transition: all ease 0.3s;
            }

            &-icon {
                width: 70px;
                height: 70px;
                border-radius: 100%;
                flex-shrink: 1;

                i {
                    color: var(--el-text-color-placeholder);
                }
            }

            &-title {
                font-size: 15px;
                font-weight: bold;
                height: 30px;
            }
        }
    }

    .home-card-three {
        .home-card-item {
            height: 600px;
            width: 100%;
            overflow: hidden;
        }
    }
}
</style>
